<html>
<head>
    <script src="../vue.js"></script>
    <style>
        .color-red {color:red}
        .color-blue {color:blue}
        .is-loading{background:blue}
    </style>
</head>
<body>
    <div id="root">
        <!--
            v-bind:xxx="" 可以是普通变量，也可是是对象
        -->
        <!--<button :class="className" @click="onClick" :title="title">-->
            <!--hover over me -->
        <!--</button>-->
        <button :class="{'is-loading':isLoading}" @click="onToggle" :title="title">
            click me!
        </button>
    </div>        
</body>
<script>
    var app=new Vue({
        el:'#root',
        data:{
            title:'now the title is being set throught javascript.',
            className:'color-red',
            isLoading:false
        },
        methods:{
            onClick:function(){
                this.className = 'color-blue';
                console.log('click!');
            },
            onToggle:function(){
                this.isLoading = !this.isLoading;
            }
        }
    });
</script>
</html>